<?php
 ob_start();
 ?>
 <html>

<head>
<title>ADD</title>
<link type="text/css" href="jquery-ui-1.8.13.custom/css/smoothness/jquery-ui-1.8.13.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>

<script type="text/javascript"> 
		function populate(o)
		{
			d=document.getElementById('doc_type');
			if(!d){return;}			
			var mitems=new Array();
                        mitems['DOC']=['ANE','GEN','SUR'];	
			d.options.length=0;
			cur=mitems[o.options[o.selectedIndex].value];
			if(!cur){return;}
			d.options.length=cur.length;
			for(var i=0;i<cur.length;i++)
			{
				d.options[i].text=cur[i];
				d.options[i].value=cur[i];
			}
		}
    </script> 
</head>
<body>
<script language="javascript">
function fncSubmit()
{
if(document.form1.stf_id.value == "")
	{
	alert('Please input staff Id');
		document.form1.stf_id.focus();
		return false;
	}
if(document.form1.f_name.value == "")
	{
		alert('Please input First Name');
		document.form1.f_name.focus();
		return false;
	}
  
if(document.form1.l_name.value == "")
	{
		alert('Please input Surname');
		document.form1.l_name.focus();       
		return false;
	}	  
if(document.form1.job_type.value == "")
	{
		alert('Please input job type');
		document.form1.job_type.focus();       
		return false;
	}	
if(document.form1.salary.value == "")
	{
		alert('Please input salary');
		document.form1.salary.focus();       
		return false;
	}
if(document.form1.startcontract.value == "")
	{
		alert('Please input Start-contract');
		document.form1.startcontract.focus();       
		return false;
	}
if(document.form1.endcontract.value == "")
	{
		alert('Please input End-contract');
		document.form1.endcontract.focus();       
		return false;
	}	
	document.form1.submit();
}

</script>
<br/>
<br/>
<center><h1>ADD STAFF</h1></center>
<br/>
<center><table border=3 bordercolor="#ff99cc">
<tr><td>

<form name="form1" action="add-staff.php" method="post" onSubmit="JavaScript:return fncSubmit();">
	ID_NO: <input type="text" name="stf_id" /><br/>
	NAME: <input type="text" name="f_name" /><br/>
	SURNAME: <input type="text" name="l_name" /><br/>
        JOB_TYPE:<select name="job_type" id="job_type" onchange="populate(this)"> 
		<option value="NUR">Nurse</option> 
        <option value="DOC">Doctor</option> 
		<option value="EXE">Executive</option> 
		<option value="FIN">Finance</option> </select>
        
        Type:<select name="doc_type" id="doc_type"> </select> <br/>
                        
        SALARY: <input type="text" name="salary" /><br/>
        
        START-CONTRACT: <input type="text" name="startcontract" id="datepicker" /><br/>
		END-CONTRACT: <input type="text" name="endcontract" id="datepicker2"/><br/>
<!--p>Format options:
	<select id="format">
		<option value="dd/mm/yy">Default - dd/mm/yy</option>
		<option value="dd-M-yy">ISO 8601 - dd-M-yy</option>
	</select>
</p-->
	

	<center><input type="submit" /></center>
        	
</form>
        
</td></tr>
</table>

<script>
	$(function() {
		$( "#datepicker" ).datepicker({
			dateFormat:'dd-M-yy'
		});
		//$( "#format" ).change(function() {
		//	$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
		//});
	});
    $(function() {
		$( "#datepicker2" ).datepicker({
			dateFormat:'dd-M-yy'
		});
		//$( "#format" ).change(function() {
		//	$( "#datepicker2" ).datepicker( "option", "dateFormat", $( this ).val() );
		//});
	});
</script>



</body>
</html>
